<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="Keywords" content="sneaker 球鞋新闻 发售 论坛 社区 正品球鞋 板鞋 复古 篮球鞋 球鞋评测 运动鞋 正品 NIKE 乔丹 AJ AIR JORDAN NEW BALANCE 潮流 新百伦 asics" />
    <meta name="Description" content="Niubility中文站是最大最专业的SNEAKER资讯和信息交流社区，有最新的潮流新闻、球鞋发售信息，也有SNEAKER爱好者的交流。信息覆盖NIKE、ADIDAS、AIR JORDAN、NEW BALANCE、ASICS、CONVERSE、VANS等众多品牌。"/>
    <link rel="icon" href="img/icons/logo.ico" type="image/x-icon" />
    <title>Niubility中文站登录</title>
    <style>
        *{
            margin: 0  auto;padding: 0;
        }
        body{

            font-size: 62.5%; font-family:arial,\5b8b\4f53,sans-serif;
            background-image:url(img/bg.png);background-size: 100% 100%\9;
            background-image:radial-gradient(100px 100px, rgba(0, 0, 0, 0) 0%, #000000 500%), url(img/bg.png);background-size: 100% 100%;
        }
        h1{
            color: #fff;
            height: 40px;
            *font-size:16px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        p{

            font-size: 14px;
            display: inline-block;
        }

        .text-center{
            text-align: center;
        }
        .clear{
            width: 100%;height: 20px;clear: both;
        }
        em{
            font-style: normal;
            display: inline-block;
            width: 70px;
            height: 25px;
            color: black;
            background: url(btns/login1.gif) no-repeat;
            text-align: center;
        }
        .active{
            background: url(btns/login.gif) no-repeat;
            color: #fff;
        }
        a img{
            border: 0;
        }
        a{
            color: black;text-decoration: none;
        }
        a:link{
            color: #fff;
        }
        a:visited{
            color: #fff;
        }
        a:hover{
            color: gray;
        }
        .main{
            width: 40%;

            padding: 35px;
        }
        .title{
            text-align: center;

            color: white;font-size: 2em;
        }
        #logo{
            margin-left: 50px;
        }
        #logo img{
            width: 200px;height: 148px;
        }
        .register{
            line-height: 46px;
        }
        .register a{

            border: 1px solid #fff;padding: 10px;
            margin-left: 5px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius:10px;
            display: inline-block\9;
            width: 78px\9;
            padding: 0\9;

        }
        .register a:hover{
            color: #000;
            background-color: #fff;
            border: 1px solid #000;
        }
        .int  {

            margin-bottom: 20px;
            font-size: 2em;
            color: rgba(255,255,255,.6);
        }
        .int label{
            color: rgb(255, 255, 255);
            text-align: right;
            width: 16%;
            display: inline-block;
            width: 78px\9;

        }
        .int input{

            font-size: 16px;
            width: 250px;
            border-radius: 10px; -webkit-border-radius: 10px;
            -moz-border-radius: 10px;padding: 5px 0;
            outline: none;
            text-align: center;
        }

        button{
            margin:26px;
        }
        #login,#forget{
            border: 0\9;
            color: #fff;
            background: url(btns/login.gif) no-repeat;
            width: 100px;height: 25px;border-radius: 10px;
        }
        #login:hover{
            color: #000;
            background: url(btns/login1.gif);
        }
        #forget:hover{
            color: #000;
            background: url(btns/login1.gif) no-repeat;
        }
        .sub{
                width: 100%;
        }
        #osx-overlay
        {

            background-color: #000;
        }
        #cue{
            position: relative;
            background-color: #fff;
            border: 5px solid gray;
            display: none;
            font-size: 18px;
            padding: 30px;
        }
        .modal-header{
            width: 100px;height: 100px;
            background: url("img/icons/warning.png");background-size: 100%;
        }
        .simplemodal-close{
            color: #000!important;
            top: 0;right: 1px;
            position: absolute;
        }
        .simplemodal-close:hover,.modal-body p a:hover{
            color: rgba(0,0,0,0.5)!important;
        }
        .modal-body p a{
            text-decoration: underline;
            color: red;
        }
        @media screen and (max-width: 876px){
            .int label{
                width: auto;
            }
        }
        @media screen and (max-width: 667px){
            .main{
                width: auto;
            }
            .int{
                text-align: left;
            }
            #login,#forget{
                width: 71px;
            }
            .int label{
                width: auto;
            }
        }


    </style>
    <script src="js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
    <script>
        $(function () {
            $(".int").find("input").bind("focus",function () {
            $("#cue").modal({
                        overlayId: 'osx-overlay',  //遮罩层名称
                        opacity: 70,   //遮罩层透明度
                        overlayClose: true //所代表元素被点击时，是否回到上一个状态，看到的现象是lol所代表的元素不可见了。
            });
            });
            $(".register").find("a").click(function (e) {
                e.stopPropagation();

            })
        })
    </script>
</head>
<body>

<div class="main text-center">
    <h1  id="HotNews"></h1>
    <div class="clear"></div>
    <div id="logo" ><a href="index.html"><img src="img/logo.png" alt="商标图片" ></a></div>
    <div class="title"><h1 class="fl" style="text-indent: -1999px">登录 </h1><p class="register fr">还未注册?<a href="register.html" title="注册界面">立即注册</a></p></div>
    <div class="clear"></div>
    <form method="post" action="" id="myForm">
        <div class="int ">
            <label for="username" >用户名:</label>
            <input type="text" id="username" />
            <p></p>

        </div>
        <div class="int ">
            <label for="email" >邮箱:</label>
            <input type="text" id="email" />
            <p></p>
        </div>
        <div class="int ">
            <label for="passWd" >密码:</label>
            <input type="text" id="passWd" />
            <p></p>
        </div>
        <div class="clear"></div>
        <div class="sub ">
            <button type="submit" id="login">登录</button>
            <button id="forget" >忘记密码</button>
        </div>

    </form>
</div>
<div id="cue" class="text-center">
    <div class="modal-header"></div>
    <div class="modal-body"><p>"恭喜你成为本站第一位访客，请先<a href="register.html" title="注册界面">立即注册</a>！"</p></div>
    <a href="#"  class="simplemodal-close">&#10006 </a>
</div>


<script type="text/javascript">
    var txt="很荣幸见证您成为本站的一员！";
    var i=1;
    var HotNews=document.getElementById("HotNews");
   setInterval(function () {
       HotNews.innerHTML=txt.substr(0,i);
        if(i==txt.length+1){
            HotNews.innerHTML="";
            i=0;
        }
        i++;
    },500);
</script>
</body>
</html>